<template>
  <div class="container">

    <Card class="top-btn-container">
      <div style="text-align:right">
        <Button icon="md-arrow-round-back" type="default">返回</Button>
        <Button icon="md-refresh" type="default">刷新</Button>
        <Button icon="md-create" type="primary" @click="applicationFormVisible = true">修改申请单信息</Button>
        <Button icon="md-print" type="default">打印</Button>
        <Button icon="ios-list-box-outline" type="default">日志\通知</Button>
        <Button icon="md-checkbox" type="primary">通知领取</Button>
        <Button icon="md-close" type="error">拒绝</Button>
        <Button icon="md-create" type="warning">转办</Button>
        <Button icon="ios-list" type="primary" @click="resultsVisible = true">办理结果</Button>
        <Button icon="ios-search" type="primary"> 检索档案</Button>
      </div>
    </Card>


    <Collapse value="1">
      <Panel name="1">
        业务信息
        <template #content>
          <Form ref="form" :label-width="100" :model="form" class="BusinessInformation" style="width: 100%;">
            <Row :gutter="16">


              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <div>
                  <FormItem label="申请编号:">
                    {{ form.applicationNumber }}
                  </FormItem>
                </div>
              </Col>

              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="申请单状态:">
                  <Tag color="blue">{{ form.applicationFormStatus }}</Tag>
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="关联申请单:">
                  <Button icon="ios-add-circle-outline" size="small" type="primary"></Button>
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="申请确认状态:">
                  <Button icon="ios-notifications-outline" size="small" type="primary"></Button>
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="业务类别:">
                  {{ form.businessCategory }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="领取档案类型:">
                  {{ form.claimFileType }}
                </FormItem>
              </Col>


              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="用户类型:">
                  <Tag color="blue">{{ form.customerType }}</Tag>
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="实名状态:">
                  <Tag color="blue">{{ form.realNameStatus }}</Tag>
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="申请人:">
                  {{ form.applicant }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="注册手机号:">
                  {{ form.registerPhoneNumber }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="联系方式:">
                  {{ form.contactInformation }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="邮箱:">
                  {{ form.mailbox }}
                </FormItem>
              </Col>


              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="性别:">
                  {{ form.gender }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="身份证号:">
                  {{ form.idNumber }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="出生日期:">
                  {{ form.dateOfBirth }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="籍贯:">
                  {{ form.nativePlace }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="提交时间:">
                  {{ form.submissionTime }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="">
                </FormItem>
              </Col>


              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="更新时间:">
                  {{ form.updateTime }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="姓名:">
                  {{ form.name }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="学号:">
                  {{ form.studentID }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="学院:">
                  {{ form.college }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="专业:">
                  {{ form.major }}
                </FormItem>
              </Col>
              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="入学时间:">
                  {{ form.enrollmentTime }}
                </FormItem>
              </Col>

              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="毕业时间:">
                  {{ form.graduationTime }}
                </FormItem>
              </Col>


              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="附件:">
                  <a href="#" style="margin-right: 80px;">毕业证</a>
                  <Button size="small" @click="attachmentClickHandle">查看</Button>
                </FormItem>
                <el-image
                  ref="image"
                  :preview-src-list="[form.graduationCertificate]"
                  :src="form.graduationCertificate"
                  style="width: 0px; height: 0px"
                >
                </el-image>
              </Col>

              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="附件:">
                  <a href="#" style="margin-right: 80px;">身份证正面</a>
                  <Button size="small" @click="attachmentClickHandle">查看</Button>
                  <el-image
                    ref="image"
                    :preview-src-list="[form.graduationCertificate]"
                    :src="form.graduationCertificate"
                    style="width: 0px; height: 0px"
                  >
                  </el-image>
                </FormItem>
              </Col>

              <Col :lg="6" :md="12" :xs="24" :xxl="4">
                <FormItem label="附件:">
                  <a href="#" style="margin-right: 80px;">身份证反面</a>
                  <Button size="small" @click="attachmentClickHandle">查看</Button>
                  <el-image
                    ref="image"
                    :preview-src-list="[form.graduationCertificate]"
                    :src="form.graduationCertificate"
                    style="width: 0px; height: 0px"
                  >
                  </el-image>
                </FormItem>
              </Col>

            </Row>
          </Form>

        </template>
      </Panel>


      <Panel name="1">
        档案检索
        <template #content>
          <Card :dis-hover="true">
            <!--搜索栏-->
            <el-row :gutter="20" style="margin-bottom: 20px;">
              <el-col :span="7" style="text-align: right;">
                <Select
                  :max-tag-count="1"
                  filterable
                  multiple
                  placeholder="全部"
                  size="large"
                  style="width: 190px;height: 40px;margin-left: 10px;text-align: left"
                >
                  <Option v-for="(option, index) in searchBarOption" :key="index" :value="option.value">
                    {{ option.label }}
                  </Option>
                </Select>
              </el-col>
              <el-col :span="10">
                <Input v-model="mainSearch" placeholder="请输入关键词..." size="large" style="width: 100%;"/>
              </el-col>
              <el-col :span="7">
                <Button icon="ios-search" style="height: 40px;" type="primary">检索</Button>
              </el-col>
            </el-row>

            <div>
              <div class="head">
                <Form ref="formInline" :model="SearchForm" inline>
                  <Row :gutter="16">
                    <Col :span="5">
                      <FormItem prop="user" style="width: 100%;">
                        <Input v-model="SearchForm.title" placeholder="题名" style="width: 100%;" type="text"></Input>
                      </FormItem>
                    </Col>
                    <Col :span="5">
                      <FormItem prop="text" style="width: 100%;">
                        <Input v-model="SearchForm.reference" placeholder="档号" type="text"></Input>
                      </FormItem>
                    </Col>
                    <Col :span="5">
                      <FormItem prop="text" style="width: 100%;">
                        <Input v-model="SearchForm.responsiblePerson" placeholder="责任者" type="text"></Input>
                      </FormItem>
                    </Col>
                    <Col :span="6">
                      <FormItem prop="text">
                        <Input v-model="SearchForm.startingYear" placeholder="起始年" type="number"></Input>
                      </FormItem>
                      <FormItem prop="text">
                        <Input v-model="SearchForm.endYear" placeholder="结束年" type="number"></Input>
                      </FormItem>
                      <FormItem prop="text" style="width: 33%;">
                        <Select v-model="SearchForm.originalTextScope" clearable placeholder="原文范围">
                          <Option :value="1">有原文</Option>
                          <Option :value="2">无原文</Option>
                        </Select>
                      </FormItem>
                    </Col>
                    <Col :span="3">
                      <FormItem>
                        <Button type="primary">结果中检索</Button>
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </div>
              <div class="body">

                <div style="display: flex;justify-content: space-between;">
                  <RadioGroup size="large" type="button" value="全部">
                    <Radio label="全部"></Radio>
                    <Radio label="案卷+文件"></Radio>
                    <Radio label="内卷"></Radio>
                  </RadioGroup>

                  <div style="width: 400px;display: flex;">
                    <Select v-model="SearchForm.originalTextScope" placeholder="综合排序" size="large"
                            style="width: 250px;"
                    >
                      <Option :value="1">按档号升序</Option>
                      <Option :value="2">按档号降序</Option>
                      <Option :value="2">按件号升序</Option>
                      <Option :value="2">按件号降序</Option>
                    </Select>

                    <RadioGroup v-model="isTable" size="large" type="button">
                      <Radio label="列表"></Radio>
                      <Radio label="摘要"></Radio>
                    </RadioGroup>
                  </div>

                </div>

                <div style="margin: 20px 0;">
                  搜索条件: {{ mainSearch }}
                </div>

                <div style="margin: 20px 0;">
                  <Checkbox v-model="selectAll" @on-change="selectAllHandle">全选</Checkbox>
                  <Button :disabled="!selectAll" type="text">批量下载文件</Button>
                  <Button :disabled="!selectAll" type="text">导出</Button>
                </div>

                <!-- 列表 -->
                <Table v-if="isTable ==='列表'" ref="selection" :columns="tableColumns" :data="tableData" width="100%"
                ></Table>

                <!-- 摘要 -->
                <List v-if="isTable ==='摘要'" border item-layout="vertical">
                  <ListItem v-for="(item,index) in tableData" :key="index">
                    <ListItemMeta :title="item.reference"/>

                    <p>
                      <span style="margin-right: 20px;">全宗号：{{ item.quanzongNo }}</span>
                      <span style="margin-right: 20px;">年度：{{ item.year }}</span>
                      <span style="margin-right: 20px;">分类号：{{ item.ClassificationNumber }}</span>
                      <span style="margin-right: 20px;">案卷号/件号：{{ item.CaseNumber }}</span>
                      <span style="margin-right: 20px;">档号：{{ item.reference }}</span>
                      <span style="margin-right: 20px;">归档单位：{{ item.filingUnit }}</span>
                      <span style="margin-right: 20px;">责任者：{{ item.responsiblePerson }}</span>
                      <span style="margin-right: 20px;">保管期限：{{ item.storagePeriod }}</span>
                      <span style="margin-right: 20px;">密级：{{ item.confidentialityLevel }}</span>
                      <span style="margin-right: 20px;">立卷人：{{ item.responsiblePerson }}</span>
                      <span style="margin-right: 20px;">立卷日期：{{ item.date }}</span>
                    </p>


                    <template slot="action">
                      <li>
                        <Icon size="20" type="md-book"/>
                      </li>
                      <li>
                        <Tag color="lime">{{ item.number }}</Tag>
                      </li>
                      <li>
                        <Tag color="green">{{ item.type }}</Tag>
                      </li>
                    </template>

                  </ListItem>
                </List>

                <!--分页-->
                <div style="text-align: center;margin: 4px 0 2px 0;">
                  <Page :total="100" show-total/>
                </div>

              </div>


            </div>
          </Card>
        </template>
      </Panel>
    </Collapse>

    <!--修改申请单弹窗-->
    <Modal
      v-model="applicationFormVisible"
      title="修改申请单"
      width="800"
    >
      <Form :label-width="100" :model="formItem">
        <FormItem label="入学时间">
          <DatePicker v-model="formItem.date" type="date"></DatePicker>
        </FormItem>
        <FormItem label="毕业时间">
          <DatePicker v-model="formItem.date" type="date"></DatePicker>
        </FormItem>

        <FormItem label="学院">
          <Input v-model="formItem.textarea" type="text"></Input>
        </FormItem>

        <FormItem label="专业及班级">
          <Input v-model="formItem.textarea" type="text"></Input>
        </FormItem>

        <FormItem label="档案利用目的">
          <Select v-model="formItem.objective">
            <Option value="beijing">学籍利用</Option>
            <Option value="shanghai">编史修志</Option>
            <Option value="shenzhen">工作查考</Option>
            <Option value="shenzhen">学术研究</Option>
            <Option value="shenzhen">经济建设</Option>
            <Option value="shenzhen">宣传教育</Option>
            <Option value="shenzhen">其他</Option>
          </Select>
        </FormItem>

        <FormItem label="高考所在地">
          <Input v-model="formItem.location" type="text"></Input>
        </FormItem>

        <FormItem label="学校名称">
          <Select v-model="formItem.school">
            <Option value="beijing">XX大学</Option>
            <Option value="shanghai">XX建筑大学</Option>
            <Option value="shenzhen">XX艺术大学</Option>
          </Select>
        </FormItem>

        <FormItem label="补充说明">
          <Input v-model="formItem.textarea" type="text"></Input>
        </FormItem>

        <FormItem label="学历层次">
          <Select v-model="formItem.educationalLevel">
            <Option value="beijing">本科</Option>
            <Option value="shanghai">专科</Option>
          </Select>
        </FormItem>

      </Form>

      <div slot="footer">
        <Button size="large" type="primary" @click="applicationFormVisible = false">生成办理结果</Button>
        <Button size="large" type="primary" @click="applicationFormVisible = false">保存</Button>
        <Button size="large" type="text" @click="applicationFormVisible = false">取消</Button>
      </div>
    </Modal>

    <!--办理结果-->
    <Drawer v-model="resultsVisible" :closable="false" title="办理结果" width="90%">
      <div class="mb10">
        <Button icon="md-refresh" class="mr10" type="primary">刷新</Button>
        <Button icon="md-refresh" type="primary" @click="InputResultsVisible = true">录入办理结果</Button>
      </div>


      <Alert>
        办理结果说明：
        <template slot="desc">11</template>
      </Alert>


      <Table ref="selection" :columns="resultsColumns" :data="resultsTableData" width="100%"></Table>

      <Tabs style="height: 100%;" value="name1">
        <TabPane label="离线上传在" name="name1" style="height: 100%;">
          <RadioGroup v-model="offlineUploadMethod">
            <Radio label="1" border>直接上传</Radio>
            <Radio label="2" border>上传后进入签章页</Radio>
          </RadioGroup>


          <div class="mt10" v-show="offlineUploadMethod === '1'">
            子 业 务 类 型:
            <Select style="width:200px">
              <Option :value="1">高考录取名册</Option>
            </Select>
          </div>

          <Upload
            class="mt10"
            multiple
            type="drag"
            action="//jsonplaceholder.typicode.com/posts/"
          >
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p>点击或将文件拖拽到这里上传</p>
            </div>
          </Upload>


        </TabPane>
        <TabPane label="在线上传" name="name2" style="height: 100%;">
          <onlineUpload style="height: 800px;"></onlineUpload>
        </TabPane>
      </Tabs>

      <!--录入结果-->
      <Modal v-model="InputResultsVisible" draggable sticky scrollable title="办理结果说明">
        <Form ref="formCustom" :label-width="80">
          <FormItem label="办理结果说明">
            <Input type="textarea"></Input>
          </FormItem>
        </Form>
      </Modal>

    </Drawer>


  </div>
</template>

<script>
import onlineUpload from './components/onlineUpload'
import { Switch } from 'view-design'

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {
    onlineUpload
  },
  props: {},
  data() {
    // 这里存放数据
    return {
      InputResultsVisible: false,
      offlineUploadMethod: '1',
      resultsVisible: false,
      applicationFormVisible: false,
      isTable: '列表',
      formItem: {},
      form: {
        //申请编号
        applicationNumber: 1654654398124527618,
        // 申请单状态
        applicationFormStatus: '办理中',
        // 关联申请单
        associatedApplicationForm: '',
        // 申请确认状态
        applicationConfirmationStatus: '',
        // 业务类别
        businessCategory: '毕业证翻译',
        // 领取档案类型
        claimFileType: '电子档案',
        // 用户类型
        customerType: '个人用户',
        // 实名状态
        realNameStatus: '已实名',
        // 申请人
        applicant: '方先生',
        // 注册手机号
        registerPhoneNumber: '17302550082',
        // 联系方式
        contactInformation: '17302550082',
        // 邮箱
        mailbox: '88888888@qq.com',
        // 性别
        gender: '男',
        // 身份证号
        idNumber: '360722199802154810',
        // 出生日期
        dateOfBirth: '2023-4-5',
        // 籍贯
        nativePlace: '济南',
        // 提交时间
        submissionTime: '05-06 09:08',
        // 更新时间
        updateTime: '05-06 09:10',
        // 姓名
        name: '张丹',
        // 学号
        studentID: '23456',
        // 学院
        college: '计算机',
        // 专业
        major: '计算机',
        // 入学时间
        enrollmentTime: '2023-05-05',
        // 毕业时间
        graduationTime: '2023-05-05',
        // 毕业证
        graduationCertificate: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        // 身份证正面
        frontOfIDCard: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
        // 身份证反面
        reverseOfIDCard: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'

      },
      srcList: [],
      searchBarOption: [
        {
          value: 'beijing',
          label: '北京'
        },
        {
          value: 'shanghai',
          label: '上海'
        },
        {
          value: 'shenzhen',
          label: '深圳'
        },
        {
          value: 'hangzhou',
          label: '杭州'
        },
        {
          value: 'guangzhou',
          label: '广州'
        }
      ],
      tableColumns: [
        {
          type: 'selection'
        },
        {
          title: '操作',
          key: 'name',
          render: (h, params) => {
            return h('div', [
              h('Tooltip', {
                props: {
                  'placement': 'bottom',
                  content: '加入借阅'
                }
              }, [h('Icon', {
                props: {
                  type: 'md-cart',
                  size: '18',
                  color: '#2d8cf0'
                }
              }, '')]),
              h('Tooltip', {
                props: {
                  'placement': 'bottom',
                  content: '档案明细'
                },
                class: {
                  'ml10': true,
                  'mr10': true
                }
              }, [h('Icon', {
                props: {
                  type: 'md-list',
                  size: '18',
                  color: '#2d8cf0'
                }
              }, '')]),
              h('Tag', {
                props: {
                  color: 'cyan'
                },
                style: {
                  'margin-right': '10px'
                }
              }, '卷内'),
              h('Tag', {
                props: {
                  color: 'magenta'
                }
              }, '档'),
              h('Tooltip', {
                props: {
                  'placement': 'bottom',
                  content: '原文预览'
                },
                class: {
                  'ml10': true,
                  'mr10': true
                }
              }, [h('Icon', {
                props: {
                  type: 'md-book',
                  size: '18',
                  color: '#2d8cf0'
                }
              }, '')])
            ])
          }
        },
        {
          title: '原文',
          key: 'originalText',
          render: (h, params) => {
            return h('Tag', {
              props: {
                color: 'cyan'
              }
            }, params.row.originalText)
          }

        },
        {
          title: '档号',
          key: 'reference'
        },
        {
          title: '案卷/件号',
          key: 'caseFile'
        },
        {
          title: '题名',
          key: 'title'
        },
        {
          title: '责任者',
          key: 'responsiblePerson'
        },
        {
          title: '档案盒条码号',
          key: 'number'
        }

      ],
      tableData: [
        {
          reference: 'JJ12-2023-cs-55',
          originalText: 18,
          caseFile: 18,
          responsiblePerson: '小明',
          date: '2016-10-03',
          title: '测试数据9的卷内文件1',
          number: '3',
          quanzongNo: 'XX大学',
          ClassificationNumber: 'JX11',
          CaseNumber: '8',
          filingUnit: '测试部门',
          year: '2023',
          confidentialityLevel: 'M33',
          storagePeriod: '永久',
          type: '文件'
        },
        {
          reference: 'JJ12-2023-cs-55',
          originalText: 24,
          caseFile: 24,
          responsiblePerson: '小明',
          date: '2016-10-01',
          title: '测试数据9的卷内文件1',
          number: '3',
          quanzongNo: 'XX大学',
          ClassificationNumber: 'JX11',
          CaseNumber: '8',
          filingUnit: '测试部门',
          year: '2023',
          confidentialityLevel: 'M33',
          storagePeriod: '永久',
          type: '文件'
        },
        {
          reference: 'JJ12-2023-cs-55',
          originalText: 30,
          caseFile: 30,
          responsiblePerson: '小明',
          date: '2016-10-02',
          title: '测试数据9的卷内文件1',
          number: '3',
          quanzongNo: 'XX大学',
          ClassificationNumber: 'JX11',
          CaseNumber: '8',
          filingUnit: '测试部门',
          year: '2023',
          confidentialityLevel: 'M33',
          storagePeriod: '永久',
          type: '文件'
        },
        {
          reference: 'JJ12-2023-cs-55',
          originalText: 26,
          caseFile: 26,
          responsiblePerson: '小明',
          date: '2016-10-04',
          title: '测试数据9的卷内文件1',
          number: '3',
          quanzongNo: 'XX大学',
          ClassificationNumber: 'JX11',
          CaseNumber: '8',
          filingUnit: '测试部门',
          year: '2023',
          confidentialityLevel: 'M33',
          storagePeriod: '永久',
          type: '文件'
        }
      ],
      resultsColumns: [
        {
          type: 'index'
        },
        {
          title: '操作',
          key: 'name',
          render: (h, params) => {
            return h('div', [

              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small',
                  icon: 'md-eye'
                }
              }, '预览'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small',
                  icon: 'md-close'
                },
                style: {
                  'margin-left': '10px'
                }
              }, '删除')])
          }
        },
        {
          title: '状态',
          key: 'originalText',
          render: (h, params) => {
            return h('Tag', {
              props: {
                color: 'green'
              }
            }, params.row.state)
          }

        },
        {
          title: '业务类型',
          key: 'type'
        },
        {
          title: '标题',
          key: 'title'
        },
        {
          title: '文件类型',
          key: 'fileType'
        },
        {
          title: '创建方式',
          key: 'creationMethod'
        },
        {
          title: '申请人是否可见',
          key: 'isVisible',
          render: (h, params) => {
            return h(Switch, {
              props: {
                value: params.row.isVisible
              },
              on: {
                'input': (val) => {
                  console.log(val)
                }
              }
            })
          }
        },
        {
          title: '创建时间',
          key: 'creationTime'
        }

      ],
      resultsTableData: [
        {
          reference: 'JJ12-2023-cs-55',
          creationMethod: '原文生成',
          caseFile: 18,
          responsiblePerson: '小明',
          creationTime: '2016-10-03 12:39:34',
          title: '测试数据9的卷内文件1',
          number: '3',
          quanzongNo: 'XX大学',
          ClassificationNumber: 'JX11',
          fileType: 'PDF',
          filingUnit: '测试部门',
          isVisible: true,
          confidentialityLevel: 'M33',
          storagePeriod: '永久',
          type: '文件',
          state: '已签章文件'
        },
        {
          reference: 'JJ12-2023-cs-55',
          creationMethod: '原文生成',
          caseFile: 24,
          responsiblePerson: '小明',
          creationTime: '2016-10-01 12:39:34',
          title: '测试数据9的卷内文件1',
          number: '3',
          quanzongNo: 'XX大学',
          ClassificationNumber: 'JX11',
          fileType: 'PDF',
          filingUnit: '测试部门',
          isVisible: true,
          confidentialityLevel: 'M33',
          storagePeriod: '永久',
          type: '文件',
          state: '已签章文件'
        },
        {
          reference: 'JJ12-2023-cs-55',
          creationMethod: '原文生成',
          caseFile: 30,
          responsiblePerson: '小明',
          creationTime: '2016-10-02 12:39:34',
          title: '测试数据9的卷内文件1',
          number: '3',
          quanzongNo: 'XX大学',
          ClassificationNumber: 'JX11',
          fileType: 'PDF',
          filingUnit: '测试部门',
          isVisible: true,
          confidentialityLevel: 'M33',
          storagePeriod: '永久',
          type: '文件',
          state: '已签章文件'
        },
        {
          reference: 'JJ12-2023-cs-55',
          creationMethod: '原文生成',
          caseFile: 26,
          responsiblePerson: '小明',
          creationTime: '2016-10-04 12:39:34',
          title: '测试数据9的卷内文件1',
          number: '3',
          quanzongNo: 'XX大学',
          ClassificationNumber: 'JX11',
          fileType: 'PDF',
          filingUnit: '测试部门',
          isVisible: true,
          confidentialityLevel: 'M33',
          storagePeriod: '永久',
          type: '文件',
          state: '已签章文件'
        }
      ],
      mainSearch: '',
      SearchForm: {
        title: '',
        reference: '',
        startingYear: '',
        endingYear: '',
        responsiblePerson: ''
      },
      selectAll: false
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 方法集合
  methods: {
    attachmentClickHandle() {
      this.$refs['image'].clickHandler()
    },
    selectAllHandle(status) {
      this.$refs.selection.selectAll(status)
    }

  } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>

<style lang="scss" scoped>
::v-deep .top-btn-container {
  .ivu-card-body {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #dcdee2;
  }


  .ivu-btn {
    margin: 0 5px;

  }
}


.BusinessInformation {
  .ivu-form-item {
    margin-bottom: 5px;
  }

}

</style>

